<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>{:lang('pay')}</title>
		<style type="text/css">
			*{padding:0; margin: 0;}
			body{background:#F0EFF4;min-width:1200px}
			.body-main{background:#F0EFF4;line-height:48px;color:#000;font-size:14px}
			.block-title{color:#666;padding-left:10px}
			.block-content{background:#fff;padding-left:10px}
			.block-content .row-label{border-bottom:1px solid #eee;width:100%;overflow:hidden}
			.row-label .label-title{float:left}
			.row-label .label-value{float:right;padding-right:10px;color:#666}
			.block-item{height:53px;overflow:hidden;border-bottom:1px solid #eee;line-height:26px;padding:10px 0}
			.block-item>div{float:left}
			.block-item .item-img-lf{height:52px;width:52px;background:#eee}
			.block-item .item-text-ct{margin-left:10px}
			.block-item .item-text-ct .text-describe{color:#666}
			.block-item .item-link-rg{float:right;padding-right:10px;margin-top:12px;overflow:hidden}
			.block-item .item-link-rg span{height:10px;width:10px;display:inline-block;border-bottom:1px solid #484848;border-right:1px solid #484848;transform:rotate(-48deg);-ms-transform:rotate(-48deg);-moz-transform:rotate(-48deg);-webkit-transform:rotate(-48deg);-o-transform:rotate(-48deg)}
			.top{background:#fff;padding:20px;}
		 	.top>a{width:120px;margin-left:10%} 
			.content{background:#fff;margin-top:20px;width:60%;margin-left:10%;padding:50px 10%;margin-bottom:10%}
			.pay-item .icon{width:28px;height:28px;margin-bottom:3px;margin-right:8px;background:#f2f2f2;vertical-align: middle;}
			.pay-item{width:130px;height:40px;line-height:40px;border:2px solid #eee;text-align:center}
			.select-type{border:2px solid #E13234;position:relative;display:inline-block}
			button.layui-btn.pay-btn{background:#E13234;margin-top:15px;width:120px}
			.select-type .selected-i{position:absolute;bottom:0;right:0;width:14px;height:14px;overflow:hidden;display:block;background:url(SITEHOME_IMG/5.png) no-repeat}
			.item label{font-size:15px;font-weight:600;color:#333}
			.item label span{font-size:15px;font-weight:500;color:#666}
			.pay-type{display:inline-block}
			.hr{background-color: #e6e6e6;height: 1px;margin: 10px 0;border: 0;clear: both;}
			button.layui-btn.pay-btn{display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #E13234;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer;margin-top: 15px;width: 120px;}
		</style>
	</head>

<body>
	<div class="body-main">
		<div class="top">
	   		<a class="logo" href="{:addon_url('niushop://web/index/index')}">
		        {notempty name="$site_info.icon"}
		        <img src="{:IMG($site_info.icon)}">
		        {else /}
		        <img src="NC_PAY_WEB_IMG/default-logo.png">
		        {/notempty}
		    </a>
		</div>
		
		<div class="content">
			<div class="item">
				<label>商品名称<span>{$pay_info.pay_detail}</span></label>
			</div>
			<div class="item">
				<label>订单编号<span>{$pay_info.out_trade_no}</span></label>
			</div>
			<div class="item">
				<label>商家名称<span>{$pay_info.pay_body}</span></label>
			</div>
			<div class="item">
				<label>订单价格<span>{$pay_info.pay_money}</span></label>
			</div>
			<hr class="hr">
			
			<div class="item">
			<label>支付方式</label>
			<span class="pay">
			{volist name = "pay_config" id = "vo" key="k"}
					{if condition = "$vo.config_info neq Null && $vo.config_info.status eq 1"}
						<div class="pay-type" data_name = "{$vo.info.name}">
							<div class="pay-item" data_name = "{$vo.info.name}">
								<img class="icon" alt="" src="{$vo.info.icon}">
								{$vo['info']['title']}
								<i class="selected-i"></i>
							</div>
						</div>
					{/if}
			{/volist}
			</span>
			</div>
			<button class="layui-btn pay-btn" onclick="pay()">立即支付</button>
		</div>
		
	</div>
	<input type="hidden" id="notify_url" value="{$notify_url}">
	<input type="hidden" id="return_url" value="{$return_url}">
	<input type="hidden" id="pay_data" value="{$pay_data}">
	<input type="hidden" id="name" value="">

	<script type="text/javascript">
		window.nc_url = {
      	  	baseUrl: "{:request()->root(true)}/",
        	route: ['{:request()->siteid()}', '{:request()->addon()}', '{:request()->module()}', '{:request()->controller()}', '{:request()->action()}'],
    	};
	</script>
	<script src="__STATIC__/js/jquery-2.2.js"></script>
	<script src="__STATIC__/js/common.js"></script>
	<script>
	function pay(){
		var return_url = $('#return_url').val();
		var notify_url = $('#notify_url').val();
		var pay_data = $('#pay_data').val();
		var name = $('#name').val();
		var url = nc.url('Pay://web/pay/payment', {'type' : name, 'data' : pay_data, 'notify_url': notify_url, 'return_url':return_url});
		window.location.href= url;
	}
	$('.pay-item').click(function() {
		$('.select-type').removeClass('select-type');
		$('#name').val($(this).attr('data_name'));
		$(this).addClass('select-type');
	})
	if($('.select-type').length == 0) {
		var obj = $(".pay").children('.pay-type').eq(0).find('.pay-item');
		$(obj).addClass('select-type');
		$('#name').val($(obj).attr('data_name'));
	} 
	</script>

	</body>
</html>